<template>
  <div
    class="temperature-analysis-container animate__faster animate__animated animate__fadeIn"
  >
    <div class="header" header="温度分析">
      <a-button class="back-button" @click="gotoBack()"> 返回 </a-button>
    </div>
    <div class="main">
      <!-- 保温时长分析  -->
      <div class="chart-dom">
        <div class="echarts-title" unit="（分钟）">保温时长分析</div>
        <a-empty v-if="empty" />
        <div
          class="echarts-container"
          ref="insulation-duration-analysis"
          v-show="!empty"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getZYPLTemAnalysisTimeLength } from "@/api/wisdom-beam/collect-app.js";
let chartInstance = null;
export default {
  data() {
    return {
      x: [],
      y: [],
      empty: false,
    };
  },
  updated() {
    if (chartInstance) {
      chartInstance.resize();
    }
  },
  mounted() {
    sessionStorage.setItem("SEARCH_FLAG", true);
    this.getData();
  },
  methods: {
    getData() {
      let { prodLineNum, componentParts } = this.$route.query;
      getZYPLTemAnalysisTimeLength({
        prodLineNum,
        componentParts,
        equType: "18",
      })
        .then((res) => {
          let { data } = res;
          this.x = data.result?.x || [];
          this.y = data.result?.y || [];
          this.$nextTick(() => {
            this.getInsulationDurationAnalysis();
          });
        })
        .catch((_) => {
          this.empty = true;
          this.x = [];
          this.y = [];
        });
    },

    // 保温时长分析
    getInsulationDurationAnalysis() {
      let chart_dom = this.$refs["insulation-duration-analysis"];
      chartInstance = this.$echarts.init(chart_dom);
      if (this.x.length == 0) {
        this.empty = true;
      } else {
        this.empty = false;
      }
      let option = {
        color: ["#2EA2F7"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "50",
          right: "30",
          bottom: "40",
          top: "80",
        },
        legend: {
          top: "40",
          right: "30",
          icon: "rect",
          itemWidth: 16,
          itemHeight: 16,
          textStyle: {
            color: "#525A5D",
            fontSize: "16",
          },
        },
        xAxis: [
          {
            type: "category",
            data: this.x,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              color: "#8C8C8C",
              margin: 16,
            },
            axisLine: {
              lineStyle: {
                color: "#333333",
              },
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              align: "left",
              color: "#999999",
              fontSize: "14",
              padding: [0, 0, 0, -20], // 上右下左与原位置距离
            },
            nameGap: 22,
            splitNumber: 5,
            axisLabel: {
              color: "#999999",
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "分钟",
            type: "bar",
            barWidth: "5%",
            data: this.y,
          },
        ],
      };
      chartInstance.setOption(option);
      //开启响应式
      window.addEventListener("resize", () => {
        chartInstance && chartInstance.resize();
      });
    },

    //返回
    gotoBack() {
      this.$router.push({
        path: `/nebula/wisdom-beam-app/sprayCuring`,
      });
    },
  },
  destroyed() {
    chartInstance = null;
  },
};
</script>

<style lang="less" scoped>
.temperature-analysis-container {
  height: 100%;
  padding: 10px 0 10px 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 11px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
    .back-button {
      color: var(--primary-color);
      background: #f1f2f7 !important;
      border: none;
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    overflow-x: hidden !important;
    .flex();
    flex-direction: column;
    .chart-dom {
      flex-shrink: 0;
      flex: 1;
      border-bottom: 2px solid #f3f4f6;
      position: relative;
      .echarts-title {
        position: absolute;
        top: 10px;
        left: 30px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        color: #525a5d;
        &::after {
          content: attr(unit);
          color: #999da5;
          font-size: 14px;
        }
      }
      .echarts-container {
        height: 100%;
        width: 100%;
      }
    }
    :last-of-type {
      border-bottom: none;
    }
  }
}
</style>
